import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {Link ,withRouter} from 'react-router';

import {parseQuery} from '../../../utils/url';
import Header from '../../../components/Header';
import Back from '../../../components/Back';
import NavTabs from '../components/NavTabs';
import NotLogin from '../components/NotLogin';
import OrderRecord from '../components/OrderRecord';

import FilterBar from '../../../components/FilterBar';
import {loadSportBallItems, loadSportBallTypes, loadOrder as loadOrderAction} from '../actions/HgActionPart';
import LoadingComponent from '../../../components/LoadingComponent';

import DatePicker from '../../../components/DatePicker';
import {format} from '../../../utils/datetime';

import InfiniteScroll from 'react-infinite-scroller';


class OrdersContainer extends LoadingComponent {

  constructor(props){
    super(props);
    const {location} = this.props;
    let query = parseQuery(location.search);
    this.defaultBall = query.ball;
    if (!this.defaultBall) {
      this.defaultBall = 'bk';
    }
    this.ball = this.defaultBall;
    console.log(['ball', this.ball]);
    this.onBallChange = this.onBallChange.bind(this);
    this.infiniteLoadMore = this.infiniteLoadMore.bind(this);

    let now = new Date();
    let day = 0;
    let beforeOneWeek = now.getTime() -  day * 24 * 60 * 60 * 1000;
    this.dateFrom = format(new Date(beforeOneWeek), 'Y-m-d');

    this.dateTo = format(now, 'Y-m-d');

    this.onDateFromChange = this.onDateFromChange.bind(this);
    this.onDateToChange = this.onDateToChange.bind(this);
    this.pageSize = 10;
    this.pageNo = 1;
    this.state = {
      hasMore: false
    };
  }

  resetPage() {
    this.pageNo = 1;
  }

  componentWillMount() {
    const html = document.documentElement;
    html.style.background = "#f5f5f5";
    const {dispatch} = this.props;
    dispatch(loadSportBallItems());
    this.loadSportOrders();
  }

  componentWillUnmount(){
    const html = document.documentElement;
    html.style.background = "#fff";
  }
  componentWillReceiveProps(nextProps) {
    let apiRes = nextProps.hgsport.huangguan.get('apiRes');
    if (apiRes.datas) {
      this.closeLoading();
    }
    if (apiRes.datas && apiRes.datas.totalPages <= this.pageNo) {
      this.setState({
        hasMore: false
      });
    } else {
      this.setState({
        hasMore: true
      });
    }
  }

  onBallChange(ball) {
    this.openLoading();
    this.ball = ball;
    this.resetPage();
    this.loadSportOrders();
  }

  onDateFromChange(dateFrom) {
    this.dateFrom = dateFrom;
    this.resetPage();
    this.loadSportOrders();
  }

  onDateToChange(dateTo) {
    this.dateTo = dateTo;
    this.resetPage();
    this.loadSportOrders();
  }
  
  loadSportOrders() {
    const {dispatch} = this.props;
    console.log([this.dateFrom, this.dateTo]);
    dispatch(loadOrderAction(this.ball, this.dateFrom, this.dateTo, this.pageNo, this.pageSize));
  }

  infiniteLoadMore(page) {
    this.pageNo = page;
    this.loadSportOrders();
  }

  render() {
    
    const {userModule} = this.props;
    const {huangguan} = this.props.hgsport;
    let orderItems = huangguan.get('orderItems');
    let isLogin = userModule.user.get('auth').get('isLogin');
    orderItems = orderItems || [];


    return(
      <div className="hg-page order-page">
        <Header {...this.props} className="hgsport-header">
          <Back backTo={'/'}/>
          <FilterBar defaultValue={this.ball} options={huangguan.get('sportBalls')} onChange={this.onBallChange} />
        </Header>
        
        <div className="page-body">
          <NavTabs />

          {!isLogin ? <NotLogin />: 
            <div>
              <div className="hgsport-order-date-picker clearfix">
                <div className="wrap">
                  <DatePicker value={this.dateFrom}  onChange={this.onDateFromChange} />
                </div>
                <div className="wrap">
                  <DatePicker value={this.dateTo} onChange={this.onDateToChange} />
                </div>
              </div>
              
              <InfiniteScroll pageStart={0} loadMore={this.infiniteLoadMore} hasMore={this.state.hasMore} loader={<div className="loader">加载中</div> }>
                <OrderRecord {...this.props} items ={orderItems} />
              </InfiniteScroll>
            </div>
          }
        </div>
      </div>
    )
  }
}

function mapStateToProps(state){
  const {app,userModule, hgsport} = state;
  return {
    app,
    userModule,
    hgsport
  }
}

export default connect(mapStateToProps)(withRouter(OrdersContainer));